<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    img{
        width: 200px;
    }
    
    #a{
    position: relative;
    }
    
    #a1{
    position: absolute;
    left: 220px;
    top: 10px;
    }
    #a2,#a3,#a4{
    position: absolute;
    left: 420px;
    top: 10px;
    }
    #a3{
    position: absolute;
    left: 620px;
    top: 10px;
    }
    #a4{
    position: absolute;
    left: 820px;
    top: 10px;
    }
    #a1 img,#a2 img,#a3 img,#a4 img{
        width: 500px;
        display: none;
    }
</style>
<body>
    <div id="a">
        <img src="./imgs/1.png" alt="">
        <img src="./imgs/2.png" alt="">
        <img src="./imgs/3.png" alt="">
        <img src="./imgs/4.png" alt="">
    </div>
    <div id="a1"><img src="./imgs/1.png" alt=""></div>
     <div id="a2"><img src="./imgs/2.png" alt=""></div>   
     <div id="a3"><img src="./imgs/3.png" alt=""></div>
     <div id="a4"><img src="./imgs/4.png" alt=""></div>
    <script>
$(function(){
    $("#a>img:first").mouseover(function(){
        $("#a1>img").animate({width:'toggle'},300)
    })
    $("#a>img:first").mouseout(function(){
        $("#a1>img").animate({width:'toggle'},300)
    })

    $("#a>img:eq(1)").mouseover(function(){
        $("#a2>img").animate({width:'toggle'},300)
    })
    $("#a>img:eq(1)").mouseout(function(){
        $("#a2>img").animate({width:'toggle'},300)
    })
    $("#a>img:eq(2)").mouseover(function(){
        $("#a3>img").animate({width:'toggle'},300)
    })
    $("#a>img:eq(2)").mouseout(function(){
        $("#a3>img").animate({width:'toggle'},300)
    })
    $("#a>img:eq(3)").mouseover(function(){
        $("#a4>img").animate({width:'toggle'},300)
    })
    $("#a>img:eq(3)").mouseout(function(){
        $("#a4>img").animate({width:'toggle'},300)
    })
})
    </script>
</body>
</html>
<!-- <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<style>
			*{
                margin: 0;padding: 0;
            }
			.a1{
				width: 450px;
				height: 400px;
				overflow: hidden;
				display: inline-block;
			}
			.a1>img{width: 100%;}
			.a2{
				width:500px;
				height: 500px;
				border: 1px solid #ccc;
				overflow: hidden;
				display: inline-block;
				position: relative;
			}
			.a2>img{
				position: absolute;
				width: 300%;
				height: 300%;
			}
			.a3{
				width: 70px;
				height: 70px;
				float: left;
				margin-left: 10px;
                margin-top: 20px;
			}
			.a3>img{
                width: 200%;
                height: 400%;
                margin-left: 20px;
            }
			#aa{
				width: 100px;
				height: 100px;
				background: #BC8F8F;
				opacity: 0.7;
				display: none;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="a1">
			<img src="./imgs/1.png" alt="" class="img1" />
			<div id="aa"></div>
		</div>
		<div class="a2"></div>
		<div>
			<div class="a3">
				<img src="./imgs/4.png" alt=""/>
			</div>	
			<div class="a3">
				<img src="./imgs/2.png" alt=""/>
			</div>	
			<div class="a3">
				<img src="./imgs/3.png" alt=""/>
			</div>	

		</div>
		
		<script>
			$(function(){
				$('.a3').mouseover(function(){
					$('.a1').children()[0].src = $(this).children()[0].src;
				});
				$('.a1').mousemove(function(e){					
					$('#aa').css({
						left: e.clientX-50+'px',
						top: e.clientY-50+'px',
						display: 'block'
					});
					var $img = $('.a1').children().eq(0);
					$('.a2').empty();
					$('.a2').append($img.clone());
					$('.img1').css({
							left: -(e.clientX-50)*2+'px',
							top: -(e.clientY-50)*2+'px'
						});
					if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) {
						$('#aa').css({display: 'none'});
					}else{
						$('#aa').css({
							left: e.clientX-50+'px',
							top: e.clientY-50+'px',
							display: 'block'
						});
					}
				});
			});
		</script>
	</body>
</html> -->
